<template>
    <div>
        <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                    v-model="MonthForm"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy 年 MM 月"
                    value-format="yyyy-MM-dd"
                    style="margin-bottom: 20px"
            ></el-date-picker>
            <el-select v-model="selectedGoodsId" filterable placeholder="请选择">
                <el-option
                        v-for="item in goodsData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" class="el_btn" @click="clickSearch">查询</el-button>
        </div>
        <!-- 数据图 -->

        <div class="bgff">
            <div ref="chart" style="width:70%;height:350px" id="chart_div"></div>
        </div>
    </div>
</template>

<script>
    import {dateFormat} from '@/util/util'
    export default {
        data() {
            return {
                goodsData:[],
                selectedGoodsId:'',
                selectedGoodsName:'',
                MonthForm: [], //当前选择时间
                sechart:null,

            };
        },
        methods: {
            clickSearch() {
                this.refreshEcharts(this.MonthForm);
            },
            async queryGoodsList(){
                const {data:res} = await this.$http.get('goods/allgoodslist');
                if(res.code !== '200'){
                    return;
                }
                console.log(res)
                this.goodsData = res.data;
            },
            async refreshEcharts() {
                const{data:res} = await this.$http.post('goods/querySellGoodsInfoByMonth',{
                    MonthForm:this.MonthForm,
                    id:this.selectedGoodsId
                })
                console.log(res)
                if(res.code!=='200'){
                    return ;
                }
                    var arr = res.data;
                    this.selectedGoodsName = arr[0].goods_name;
                    for(var obj of arr){
                        obj.sell_time = dateFormat(obj.sell_time,'day')
                    }
                    console.log(arr)
                    var option = {
                        title:{
                          text:this.selectedGoodsName,
                            left:'center',
                            // top:'center'
                        },
                        legend: {
                            data: ["下单时间", "订单金额"],
                        },
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                type: "cross",
                                crossStyle: {
                                    color: "#999",
                                },
                            },
                        },

                        xAxis: {
                            // name:'下单时间',
                            type: "category",
                            data: arr.map((obj) => obj.sell_time),
                        },
                        yAxis: {
                            type: "value",
                        },
                        series: [
                            {
                                name: "下单数量",
                                data: arr.map((obj) => obj.sell_number),
                                type: "line",
                            },
                        ],
                    };
                    this.sechart.setOption(option);
            },
        },
        mounted() {
            this.sechart = this.$echarts.init(document.getElementById("chart_div"));
            this.refreshEcharts();
        },
        created() {
            this.queryGoodsList();
        },
    };
</script>

<style lang="less" scoped>
    .block {
    }
    .demonstration {
        margin-right: 10px;
    }
    .el_btn {
        margin: 0px 10px;
    }
    .bgff {
        background-color: #fff;
    }
    .el-date-editor--monthrange.el-input, .el-date-editor--monthrange.el-input__inner {
        width: 400px;
    }
</style>